<template>
	<view class="register" :style="{
			backgroundColor: decorateData.backgroundColor,
			backgroundImage: `url(${decorateData.backgroundImage})`,
			background: `linear-gradient(${decorateData.gradientAngle}deg, ${decorateData.gradientBackgroundColor1}, ${decorateData.gradientBackgroundColor2})`,
			backgroundSize: 'cover',
			backgroundPosition: 'center',
			backgroundRepeat: 'no-repeat'
		}">
		<view class="container" :style="{
				paddingTop: `${decorateData.marginTop}px`
			}">
			<!-- 头部 -->
			<uv-image :src="decorateData.logo" :width="`${decorateData.logoWidth}px`" mode="scaleToFill"
				:height="`${decorateData.logoHeight}px`" class="register-header">
				<template v-slot:error>
					<view style="font-size: 24rpx">加载失败</view>
				</template>
			</uv-image>

			<!-- 注册方式切换 -->
			<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onClickTab" style-type="text"
				active-color="#2979ff"></uni-segmented-control>

			<!-- 账号密码注册 -->
			<AccountRegister v-if="currentTab === 0" @submit="handleAccountRegister" />

			<!-- 短信注册 -->
			<SmsRegister v-else-if="currentTab === 1" @submit="handleSmsRegister" @send-sms="sendSmsCode" />

			<!-- 邮箱注册 -->
			<EmailRegister v-else-if="currentTab === 2" @submit="handleEmailRegister" @send-email="sendEmailCode" />

			<!-- 第三方登录 -->
			<view class="third-login">
				<!-- 注册链接 -->
				<view class="register-link">
					已有账号?
					<text class="register-text" @click="goLogin" :style="{ color: getTheme.themeColor }">立即登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import AccountRegister from "./AccountRegister.vue";
	import SmsRegister from "./SmsRegister.vue";
	import EmailRegister from "./EmailRegister.vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();

	// 注册方式选项卡
	const tabs = ref(["账号注册", "短信注册", "邮箱注册"]);
	const currentTab = ref(0);

	// 方法
	const onClickTab = (e) => {
		currentTab.value = e.currentIndex;
	};

	const handleAccountRegister = (formData) => {
		console.log("账号注册:", formData);
		uni.showToast({
			title: "注册成功",
			icon: "success"
		});
		// 这里添加实际的注册逻辑
	};

	const handleSmsRegister = (formData) => {
		console.log("短信注册:", formData);
		uni.showToast({
			title: "注册成功",
			icon: "success"
		});
		// 这里添加实际的注册逻辑
	};

	const handleEmailRegister = (formData) => {
		console.log("邮箱注册:", formData);
		uni.showToast({
			title: "注册成功",
			icon: "success"
		});
		// 这里添加实际的注册逻辑
	};

	const sendSmsCode = (phone, callback) => {
		console.log("发送短信验证码到:", phone);
		// 模拟异步请求
		setTimeout(() => {
			uni.showToast({
				title: "验证码已发送",
				icon: "success"
			});
			callback(); // 通知子组件发送成功
		}, 1000);
	};

	const sendEmailCode = (email, callback) => {
		console.log("发送邮箱验证码到:", email);
		// 模拟异步请求
		setTimeout(() => {
			uni.showToast({
				title: "验证码已发送",
				icon: "success"
			});
			callback(); // 通知子组件发送成功
		}, 1000);
	};

	const goLogin = () => {
		uni.navigateTo({
			url: "/pages/login/login"
		});
	};

	const decorateData = ref({
		logo: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/卡易乐 定稿_画板 1_副本.jpg",
		logoWidth: 125,
		logoHeight: 40,
		marginTop: 160,
		name: "登录/注册",
		img: new URL("/@/assets/images/userInfo.png", import.meta.url).href,
		backgroundImage: "",
		backgroundColor: "#fff",
		gradientBackgroundColor1: "",
		gradientBackgroundColor2: "",
		gradientAngle: 90
	});
</script>

<style lang="scss">
	.register {
		height: 100vh;
		margin: 0 -2vw;
		padding: 0 4vw;

		.register-header {
			margin: 0 auto;
			margin-bottom: 30px;
		}

		.register-header {
			margin: 0 auto;
			margin-bottom: 30px;
		}

		.third-login {
			margin-top: 30px;

			.register-link {
				text-align: center;
				font-size: 14px;

				.register-text {
					margin-left: 5px;
				}
			}
		}
	}
</style>